<template>
  <div class="login">
    <div class="form_content_wrap">
      <div class="title_wrap">car</div>
      <el-form class="form_wrap" :model="form" :rules="rules" ref="formRef">
        <el-dropdown placement="top">
          <div class="me_wrap">
            <img src="@/assets/img/icon.png" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a
                class="gitee_link"
                href="https://gitee.com/zhouwj_dd"
                target="_blank"
                >my gitee</a
              >
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-form-item prop="user">
          <el-input
            v-model="form.user"
            prefix-icon="User"
            placeholder="账号"
            clearable
          />
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            v-model="form.pass"
            prefix-icon="Lock"
            type="password"
            placeholder="密码"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="login">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  head: {
    title: "登录",
  },
  data: () => ({
    form: {
      user: "zwjun",
      pass: "zwjun",
    },
    rules: {
      user: [
        { required: true, message: "请输入账号", trigger: ["change", "blur"] },
      ],
      pass: [
        { required: true, message: "请输入密码", trigger: ["change", "blur"] },
      ],
    },
  }),
  methods: {
    login() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.form.user != "zwjun" || this.form.pass != "zwjun") {
            this.$message.error("账号密码错误！");
            return;
          }
          this.$cookies.set("token", this.form.user);
          this.$store.commit("user/M_UPDATE_TOKEN", this.form.user);
          const path = this.$route.query.path || "/home";
          this.$router.replace({ path });
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("https://s1.xiaomiev.com/activity-outer-assets/web/battery/section2.jpg?x-fds-process=image/resize,q_90,f_webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  font-family: "Courier New", Courier, monospace;
}

.me_wrap img {
  cursor: pointer;
  object-fit: fill;
}

.login::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.form_content_wrap {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  z-index: 9;
}

.title_wrap {
  font-size: 26px;
  font-weight: 600;
  line-height: 50px;
  color: #fff;
  text-align: center;
}

.form_wrap {
  background: #fff;
  border-radius: 4px;
  padding: 12px 22px 20px;
  box-sizing: border-box;
}

.gitee_link {
  font-size: 36px;
}

.gitee_link:hover {
  color: #7a68e7;
}

.login >>> .el-dropdown {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.5;
  display: block;
  margin: 12px auto;
}

.login >>> .el-button {
  width: 100%;
}

.login >>> .el-button:focus,
.el-button:hover {
  color: #7a68e7;
  border-color: #7a68e7;
}
</style>
